<template functional>
  <el-row class="detail">
    <el-col class="detail-title">
      <el-row>
        <el-col class="detail-title-main">{{props.detailInfo.itemTitle}}</el-col>
        <el-col class="detail-title-sub">{{props.detailInfo.itemSubTitle}}</el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.detail {
  &-title {
    height: 96px;
    background: #fafaff;
    border: 1px solid #dbe1f6;
    padding: 20px;

    &-main {
      font-size: 18px;
      font-weight: 600;
      color: #3b3b3b;
      margin-bottom: 10px;
    }

    &-sub {
      font-size: 14px;
      font-weight: 400;
      color: #b3b3b3;
    }
  }

  &-content {
    height: 146px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    padding: 20px 0;

    &-item {
      padding: 0 20px;
      border-left: 1px solid #e6e6e6;

      &:first-of-type {
        border-left: none;
      }

      .company-info {
        display: inline-block;
        vertical-align: top;

        &-title {
          font-size: 14px;
          font-weight: 600;
          color: #4d4d4d;
        }

        &-tags {
          .tag-item {
            margin-right: 10px;
          }
        }
      }
    }

    .image {
      padding-right: 20px;
    }

    &-info {
      font-size: 14px;
      font-weight: 500;
      color: #b3b3b3;
      margin-bottom: 20px;
    }

    &-value {
      font-size: 24px;
      font-weight: 600;

      &--red {
        color: #f66f6a;
      }
    }
  }
}
</style>